<!--证件到期-->
<template>
  <div class="page">
    <div class="top-search">
      <div class="top-search-item">
        <el-button type="primary">刷新</el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          align="center"
        />
        <el-table-column
          label="企业名称"
          align="center"
        />
        <el-table-column
          label="企业简称"
          align="center"
        />
        <el-table-column
          label="负责人"
          align="center"
        />
        <el-table-column
          label="联系电话"
          align="center"
        />
        <el-table-column
          label="地址"
          align="center"
        />
        <el-table-column
          label="企业简介"
          align="center"
        />
      </el-table>
    </div>
    <div class="bottom-content">
      <div class="bottom-content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="人员证件快到期" name="first">
            <div class="bottom-content-bottom">
              <el-table
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column
                  label="名字"
                />
                <el-table-column
                  label="作业类别"
                />
                <el-table-column
                  label="证件号"
                />
                <el-table-column
                  label="有效日期"
                />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="人员证件到期" name="second">
            <div class="bottom-content-bottom">
              <el-table
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column
                  label="名字"
                />
                <el-table-column
                  label="作业类别"
                />
                <el-table-column
                  label="证件号"
                />
                <el-table-column
                  label="有效日期"
                />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="企业证件快到期" name="third">
            <div class="bottom-content-bottom">
              <el-table
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column
                  label="证件"
                />
                <el-table-column
                  label="时间"
                />
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="企业证件到期" name="fourth">
            <div class="bottom-content-bottom">
              <el-table
                :data="tableData"
                style="width: 100%"
              >
                <el-table-column
                  label="证件"
                />
                <el-table-column
                  label="时间"
                />
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      activeName: 'first'
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 1rem;

  .top-search {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;

    .top-search-item {
      margin-right: 1rem;
    }
  }

  .content {
    margin-top: 2rem;
    width: 100%;
    height: 20rem;
  }
  .bottom-content {
    margin-top: 2rem;
    width: 100%;
    height: 22rem;
  }
}

.text-green {
  color: #67C23A;
  cursor: pointer;
}
</style>
